<template>
 <van-swipe>
  <van-swipe-item v-for="item in list" :key="item">
    <img :src="list.imgUrl" alt="">
  </van-swipe-item>
  <template #indicator="{ active }">
    <div class="custom-indicator">{{ active + 1 }}/4</div>
  </template>
</van-swipe>
<div class="price">
  <div>
    <b>￥</b>
    <span>111</span>
  </div>
  <van-tag round type="primary">标签</van-tag>
</div>
</template>
<script>
import { Swipe, SwipeItem,Tag } from 'vant';
import {onMounted,ref} from 'vue';
import {useRoute} from 'vue-router'
export default {
 setup() {
   const list =ref([])
    const Route=useRoute();
    onMounted(()=>{
      console.log(Route.query);
      list.value=Route.query;
    })
    return { 
      Swipe,
      SwipeItem,
      list,
      Tag
    }
   
  },
}
</script>
<style>
  .custom-indicator {
    position: absolute;
    right: 5px;
    bottom: 5px;
    padding: 2px 5px;
    font-size: 12px;
    background: rgba(0, 0, 0, 0.1);
    height: 100px;
  }
  .van-swipe-item{
    height: 300px;
  }
  .custom-indicator{
    height: 10px;
    border-radius: 10px;
    width: 30px;
    height: 20px;
    line-height: 20px;
  }
  .price{
    position: absolute;
  }
</style>